<script setup lang="ts">
interface Props {
  content: {
    src: string,
    name: string,
    link: string
  }
}

const props = withDefaults(defineProps<Props>(), {})

const emits = defineEmits(['to'])

const toLink = () => {
  emits('to', props.content.link)
}

</script>
<template>
  <div class="w-full">
    <div class="bg-primary/10 aspect-video rounded-lg overflow-hidden duration-300 hover:-translate-y-2 cursor-pointer flex items-center justify-center" style="backdrop-filter: saturate(50%) blur(4px);" @click="toLink">
      <div class="w-1/4 text-center font-bold">
        <img class="w-full h-full object-cover" :src="content.src">
        <div class="py-1">
          {{ content.name }}
        </div>
      </div>
    </div>
  </div>
</template>
